<template>
  <div>
<h2>会员增加</h2>
  </div>
  <table border="1">
    <tr>
      <td>会员姓名</td>
      <td>
        <input type="text" v-model="state.name">
      </td>
    </tr>
    <tr>
      <td>会员卡号</td>
      <td>
        <input type="text" v-model="state.number">
      </td>
    </tr>
    <tr>
      <td>联系方式</td>
      <td>
        <input type="text" v-model="state.phone">
      </td>
    </tr>
    <tr>
      <td>会员生日</td>
      <td>
        <input type="date" v-model="state.sdate">
      </td>
    </tr>
    <tr>
      <td>民族</td>
      <td>
        <input type="radio" v-model="state.minzu" value="汉族">汉族
        <input type="radio" v-model="state.minzu"value="回族">回族
      </td>
    </tr>
    <tr>
      <td>消费金额</td>
      <td>
        <input type="text" v-model="state.price">
      </td>
    </tr>
    <tr>
      <td>身份证号</td>
      <td>
        <input type="text" v-model="state.card">
      </td>
    </tr>
    <tr>
      <td>注册时间</td>
      <td>
        <input type="date" v-model="state.dDate">
      </td>
    </tr>
    <tr>
      <td>性别</td>
      <td>
        <input type="radio" v-model="state.sex" value="男">男
        <input type="radio" v-model="state.sex" value="女">女
      </td>
    </tr>
    <tr>
      <td>城市</td>
      <td>
        <select v-model="state.city">
          <option value="">上海</option>
         
          <option value="北京">北京</option>
          <option value="天津">天津</option>
          <option value="江苏">江苏</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>会员类型</td>
      <td>
        <select v-model="state.type">
          <option value="">白银</option>
        
          <option value="黄金">黄金</option>
          <option value="黑金">黑金</option>
        
        </select>
      </td>
    </tr>
    <tr>
      <td>会员等级</td>
      <td>
        <select v-model="state.dengji">
          <option value="">一级</option>
          <option value="一级">一级</option>
          <option value="二级">二级</option>
          <option value="三级">三级</option>
        
        </select>
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <input type="button" value="增加" @click="add">
       
      </td>
    </tr>
  </table>
</template>

<script setup lang="ts">
import axios from 'axios';
import{reactive,toRefs,onMounted} from'vue'
import { useRoute,useRouter  } from 'vue-router';
let route=useRoute();
let router=useRouter();
let data=reactive({
  state:{
name: '',
  number: '',
  phone: '',
  sdate: '',
  minzu: '',
  price: '',
  card: '',
  dDate: '',
  sex: '',
  city: '',
  type: '',
  dengji: ''
  }
})
let{state}=toRefs(data)

function add()
{
  let obj={
    "name": state.value. name,
  "number": state.value. number,
  "phone": state.value.  phone,
  "sdate": state.value.  sdate,
  "minzu": state.value.  minzu,
  "price": state.value.  price,
  "card": state.value.   card,
  "dDate": state.value.  dDate,
  "sex": state.value.    sex,
  "city": state.value.   city,
  "type": state.value.   type,
  "dengji": state.value. dengji,
  }
  
  if(state.value.card.length<18)
  {
    alert("身份证号必须是18位数")
    return;
  }
  if(state.value.phone.length<11)
  {
    alert("手机号必须是唯一")
    return;
  }
  axios({
    url:'/api/Member/Add',
    method:'post',
    data:obj
  })
  .then(res=>{
    if(res.data.data==1)
  {
    alert("注册成功")
    router.push("../show")
  }
  }).catch(err=>{

  })
}
</script>

<style scoped>

</style>